<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>兑换</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/1px.css" />
		<style>
			html {
				font-family: Roboto, Arial, "Noto Sans CJK SC", "Noto Sans CJK TC", "Pingfang SC", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
			}
			
			body {
				overflow-x: hidden;
				background-color: #fff !important;
			}
			
			.mui-content {
				background-color: #fff;
			}
			/*头像*/
			
			.flex {
				display: flex;
			}
			
			.user-info {
				padding: 3px 0;
			}
			
			.header {
				flex: 3;
				text-align: center;
			}
			
			.header img {
				height: 70px;
				width: 70px;
				vertical-align: middle;
			}
			
			.info {
				flex: 5;
				font-size: 14px;
				line-height: 24px;
			}
			
			.change-btn {
				flex: 2;
			}
			/**/
			
			.exchange {
				padding: 0 2%;
				margin: 5px 0;
			}
			
			.text {
				font-size: 13px;
				text-align: center;
			}
			
			.line {
				margin-top: 10px;
			}
			/*列表*/
			
			.goods-list {
				list-style: none;
			}
			
			.goods-each {
				padding: 5px 5px;
				position: relative;
			}
			
			.bgGray {
				background-color: #F8F8F8;
			}
			
			.img-box {
				flex: 2;
				position: relative;
			}
			
			.img-box img {
				height: 70px;
				width: 70px;
				vertical-align: middle;
				text-align: center;
			}
			
			.img-box .id {
				position: absolute;
				bottom: 1px;
				width: 100%;
				background-color: rgba(52, 52, 52, .5);
				color: #FFFFFF;
				text-align: center;
				font-size: 13px;
			}
			
			.goods-info-box {
				flex: 4;
				font-size: 14px;
				line-height: 24px;
			}
			
			.goods-info-box div {
				margin-left: 5px;
			}
			
			.goods-op-box {
				flex: 3;
				position: relative;
				height: 100%;
			}
			
			.recovery-num {
				position: absolute;
				right: 20px;
				font-size: 13px;
			}
			
			.choose-btn {
				width: 70%;
				position: absolute;
				bottom: -70px;
				right: 5px;
				text-align: center;
				background-color: #FF9800;
				border-color: #FF9800;
				color: #fff;
			}
			
			.choose-btn:active {
				background-color: #e6c697;
			}
			/*滚动区*/
			
			.mui-scroll-wrapper {
				top: 115px;
				bottom: 80px;
			}
			/*底部*/
			
			.total-info {
				height: 39px;
				line-height: 39px;
				background-color: #fff;
				position: absolute;
				bottom: 39px;
				width: 100%;
				font-size: 14px
			}
			
			.total-info {
				text-align: center;
			}
			
			footer {
				height: 38px;
				line-height: 38px;
				background-color: #fff;
				position: absolute;
				bottom: 0;
				width: 100%;
				text-align: center;
				font-size: 15px
			}
			
			footer:before {
				content: '';
				height: 1px;
				position: absolute;
				right: 0;
				bottom: 38px;
				width: 100%;
				transform: scaleY(.5);
				background-color: #acacb4;
			}
			
			.flex-item {
				flex: 1;
			}
			
			.back-btn {
				background-color: #E6E6E6;
				color: #000;
				width: 90%;
				margin: auto auto;
				vertical-align: middle;
			}
			
			.submit-all-btn {
				background-color: #ff6800;
				border-color: #ff6800;
				color: #fff;
				width: 90%;
				margin: auto auto;
				vertical-align: middle;
			}
		</style>
	</head>

	<body>
		<script src="../js/mui.min.js"></script>
		<div class="mui-content" id="app">
			<div class="user-info flex vux-1px-b">
				<div class="header">
					<img src="../images/cbd.jpg" alt="" />
				</div>
				<div class="info">
					<div></div>
					<div>ID：</div>
					<div>当前积分：</div>
				</div>
				<div class="change-btn">
				</div>
			</div>
			<!---->
			<div class="exchange mui-row">
				<div class="line mui-col-sm-4 mui-col-xs-4 vux-1px-b"></div>
				<div class="text mui-col-sm-4 mui-col-xs-4">兑换货品</div>
				<div class="line mui-col-sm-4 mui-col-xs-4 vux-1px-b"></div>
			</div>
			<!--礼品-->
			<div id="refreshContainer" class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="goods-list mui-table-view mui-table-view-chevron vux-1px-t">

					</ul>
					<script id="goodsList" type="text/html">
						<%for(var i=0;i<list.length;i++){%>
						<li class="goods-each">
							<div class="flex">
								<div class="img-box">
									<img src="<%=imgPath+list[i].cutImg%>" alt="" />
									<div class="id">
										<%=list[i].goodsId%>
									</div>
								</div>
								<div class="goods-info-box">
									<div class="goods-name">
										<%=list[i].goodsName%>
									</div>
									<div class="goods-id">库存：
										<%=list[i].totalNum%>
									</div>
									<div class="goods-num">门店积分：
										<%=list[i].score%>
									</div>
								</div>
								<div class="goods-op-box">
									<span class="recovery-num">兑换数量:<%=list[i].amount%></span>
									<button type="button" data-index="<%=i%>" class="change-choose-btn mui-btn mui-btn-primary choose-btn">调整</button>
								</div>
							</div>
						</li>
						<%}%>
					</script>
				</div>
			</div>
			<!--底部-->
			<div class="total-info vux-1px-t">
				<span>需要积分：0</span>
			</div>
			<footer class="flex withdraw-btn-box">
				<div class="flex-item mui-action-back">
					上一步
				</div>
				<div class="flex-item submit-all-btn">
					提交
				</div>
			</footer>
			<!---->
		</div>
		<script src="../config.js"></script>
		<script src="../js/template-native.js"></script>
		<script type="text/javascript">
			mui.init({
				beforeback: function() {
					var exchangePage = plus.webview.getWebviewById('exchange')

					mui.fire(exchangePage, 'changeNum', {
						goods: returnInfo.goods
					})
				}
			})
			var currentShopObj = {},
				returnInfo = {
					merchantId: '',
					storeId: '',
					storeName: '',
					header: '',
					userId: '',
					openId: '',
					userNick: '',
					userScore: '',
					goods: []
				},
				userInfo = {},
				exchangePoint = 0,
				isSubmit = true;
			mui.plusReady(function() {
				scroll()
				receiveParams()
				setUser()
				setFooter()
				setPage()
				bindEvent()
			})

			function scroll() {
				//滚动
				mui('.mui-scroll-wrapper').scroll({
					scrollY: true,
					bounce: true,
					deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006，
				});
			}

			function receiveParams() {
				var self = plus.webview.currentWebview()
				console.log(JSON.stringify(self))
				currentShopObj = self.currentShopObj
				userInfo = self.userInfo
				returnInfo = self.returnInfo
				type = self.type
				qrData = self.qrData
			}
			//头像 页尾部
			function setUser() {
				var userI = document.querySelectorAll(".info>div")
				if(type === 4) { //手机游戏
					var nowName = userInfo.userNick
					if(userInfo.userNick) {
						userI[0].innerText = userInfo.userNick
					} else {
						userI[0].innerText = '--'
					}
					userI[1].innerText = 'ID：' + userInfo.userId
					userI[2].innerText = '当前彩票：' + userInfo.userScore
					var headImg
					if(userInfo.userHead.indexOf('http')===-1){
						headImg = config.imgPath + userInfo.userHead
					} else {
						headImg = userInfo.userHead
					}
					document.querySelector(".header img").setAttribute('src', headImg)
				} else { //普通会员中心
					if(userInfo.userName) {
						userI[0].innerText = userInfo.userName
					} else {
						userI[0].innerText = '--'
					}
					userI[1].innerText = 'ID：' + userInfo.userId
					userI[2].innerText = '当前积分：' + userInfo.point
					var headImg
					if(userInfo.header.indexOf('http')===-1){
						headImg = config.imgPath + userInfo.header
					} else {
						headImg = userInfo.header
					}
					document.querySelector(".header img").setAttribute('src', headImg)
				}
			}

			function setFooter() {
				var totalPoint = 0
				returnInfo.goods.forEach(function(item) {
					totalPoint += item.amount * item.score
				})
				exchangePoint = totalPoint
				if(type === 4) {
					document.querySelector(".total-info span").innerText = "需要彩票：" + totalPoint * userInfo.scoreRate
				} else {
					document.querySelector(".total-info span").innerText = "需要积分：" + totalPoint
				}
			}

			function setPage() {
				var html = template('goodsList', {
					list: returnInfo.goods,
					imgPath: config.imgPath
				})

				mui('.goods-list')[0].innerHTML = html
			}
			//绑定监听
			function bindEvent() {
				//修改
				mui('.goods-list').on('tap', '.change-choose-btn', function(e) {
					var index = this.getAttribute('data-index')
					var returnNum = returnInfo.goods[index].amount
					var btn = ['取消', '确定']
					mui.prompt('请输入兑换数量', returnNum, '调整', btn, function(e) {
						if(e.index == 1) {
							if(e.value) {
								returnInfo.goods[index].amount = e.value
								setFooter()
								document.querySelectorAll(".recovery-num")[index].innerText = '兑换数量：' + e.value
							} else {
								mui.toast('请填写回收数量！')
							}
						}
					}, 'div')
					document.querySelector(".mui-popup-input input").type = 'number'
				})
				//提交
				mui(".withdraw-btn-box .submit-all-btn")[0].addEventListener('tap', function() {
					if(isSubmit === false) {
						return
					}
					isSubmit = false
					if(type === 4) { //游戏会员
						var elGoods = []
						returnInfo.goods.forEach(function(item) {
							var arr = {}
							arr.goodsId = item.goodsId
							arr.goodsName = item.goodsName
							arr.goodsPrice = item.goodsPrice
							arr.goodsScore = item.score
							arr.liveScore = item.score * userInfo.scoreRate
							arr.count = item.totalNum
							if(item.actId){
								arr.actId=item.actId
							}
							elGoods.push(arr)
						})
						config.ajax({
							url: '/live/ex',
							data: {
								storeId: currentShopObj.storeId,
								storeName: currentShopObj.storeName,
								userId: userInfo.userId,
								userNick: userInfo.userNick,
								userHead: userInfo.userHead,
								goodsScore: exchangePoint,
								liveScore: exchangePoint * userInfo.scoreRate,
								data: qrData,
								goods: elGoods
							},
							success: function(res) {
								if(res.result === 1) {
									mui.openWindow({
										url: '../integral/userInfo.html',
										id: 'userInfo',
										styles: {
											top: 0, //新页面顶部位置
											bottom: 0, //新页面底部位置         
											titleNView: {
												titleText: '个人信息',
												titleColor: "#FFFFFF",
												titleSize: "17px",
												backgroundColor: "#FF6800",
												autoBackButton: true,
												//                homeButton: true,
												buttons: [{
													float: "right",
													fontSize: "18px",
													fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
													text: "\ue602",
													onclick: function() {
														var allPage = plus.webview.all()
														var nowPage = plus.webview.getWebviewById('index')
														for(var i = 0; i < allPage.length; i++) {
															if(allPage[i].getURL() !== nowPage.getURL()) {
																plus.webview.close(allPage[i]);
															}
														}
													}
												}],
												splitLine: {
													color: "#CCCCCC",
													height: "1px"
												}
											}
										},
										extras: {
											currentShopObj: currentShopObj,
											member: userInfo,
											syncdata: res.syncdata,
											type: 4
										}
									})
									setTimeout(function() {
										isSubmit = true
									}, 2000)
								} else {
									mui.toast(res.errormsg)
									setTimeout(function() {
										isSubmit = true
									}, 1000)
								}
							}
						})
					} else { //普通会员
						returnInfo.userScore = userInfo.point - exchangePoint
						config.ajax({
							url: '/redemption/doRedemption',
							data: returnInfo,
							success: function(res) {
								if(res.result === 1) {
									var title = '个人信息'
									mui.openWindow({
										url: '../integral/userInfo.html',
										id: 'userInfo',
										styles: {
											top: 0, //新页面顶部位置
											bottom: 0, //新页面底部位置         
											titleNView: {
												titleText: title,
												titleColor: "#000000",
												titleSize: "17px",
												backgroundColor: "#F7F7F7",
												autoBackButton: true,
												//                homeButton: true,
												buttons: [{
													float: "right",
													fontSize: "18px",
													fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
													text: "\ue602",
													onclick: function() {
														var allPage = plus.webview.all()
														var nowPage = plus.webview.getWebviewById('index')
														for(var i = 0; i < allPage.length; i++) {
															if(allPage[i].getURL() !== nowPage.getURL()) {
																plus.webview.close(allPage[i]);
															}
														}
													}
												}],
												splitLine: {
													color: "#CCCCCC",
													height: "1px"
												}
											}
										},
										extras: {
											currentShopObj: currentShopObj,
											member: userInfo,
											score: returnInfo.userScore,
											type: 2
										}
									})
									setTimeout(function() {
										isSubmit = true
									}, 2000)
								} else {
									if(res.errorGoods) {
										var str = res.errorGoods.join(',')
										mui.toast('id为' + str + '的货品不足')
									} else {
										mui.toast(res.errormsg)
									}
									setTimeout(function() {
										isSubmit = true
									}, 1000)
								}
							}
						})
					}
				})
			}
		</script>
	</body>

</html>